<template>
  <section class="todoapp">
    <todo-header @add="handleAdd" ></todo-header>
    <todo-main :list="showList" 
      @del="handleDel" 
      @changeState="handleChangeState"
      @changeAll="handleChangeAll"
      ></todo-main>
    <todo-footer :list="list" @changeType="handleType" @clear="handleClear" :type="type"></todo-footer>
  </section>
</template>

<script>
// 1. 不建议使用小驼峰 
// 2. 不要使用html标签名作为组件名

// ==> 文件那边的名字 两种 
//     1. 大驼峰  TodoHeader 
//     2. 中横线小写  todo-header 

// 组件注册的时候，推荐 ==> 大驼峰
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      // 数据，放在公共的父组件中
      list: JSON.parse(localStorage.getItem('todoList')) || [],
      type:'all'
    }
  },
  computed:{
    showList(){
      // 要给todo-main展示的数据，可以依据list和我们的type条件筛选得到
      // return 
      if (this.type === 'all'){
        return this.list
      } else if (this.type === 'active'){
        return this.list.filter(el => el.isDone === false)
      } else {
        // 已完成的任务
        return this.list.filter(el => el.isDone === true)
      }
    }
  },
  // 深度监听，因为list是一个复杂数据类型
  watch:{
    list:{
      deep:true,
      handler(newVal){
        // console.log(newVal)
        localStorage.setItem('todoList', JSON.stringify(newVal))
      }
    }
  },
methods:{
  handleDel(id){
    console.log(id)
    // 过滤list中item
    this.list = this.list.filter(item => item.id !== id)
  },
  handleAdd(name){
    console.log(name)
    // 从数组的前面添加 unshift
    this.list.unshift({
      id: Date.now(),
      // name:name,
      name,
      isDone:false
    })
  },
  handleChangeState(id){
    console.log(id)
    // 从数组list中，找到对应的id的对象，修改它的状态 
    const obj = this.list.find(el => el.id === id)
    console.log(obj)
    // 取反就ok了
    obj.isDone = !obj.isDone
  },
  handleClear(){
    // 把已完成的删除 ，留下的是未完成的
    this.list = this.list.filter(el => el.isDone === false)
  },
  handleType(type){
    this.type = type
  },
  handleChangeAll(val){
    console.log(val)
    this.list.forEach(el => el.isDone = val)
  }
}
}
</script>

<style></style>
